<template>
	<view class="root f1 safe-area-inset-bottom pt-44 f1 jc-center">
		<text :style="{ margin: `0 54rpx` }" class="fs-66 fs-700">重置密码</text>

		<view class="mt-100">
			<block v-for="(item, key) in model" :key="key">
				<view
					:style="{
						boxShadow: `0 8rpx 44rpx 0 rgba(207, 207, 207, 0.3)`,
						minHeight: `96rpx`,
						margin: `22rpx 56rpx`,
						padding: `20rpx`,
					}"
					class="br-20 fd-row ai-center"
				>
					<image
						class="width-32 height-38 mr-18"
						:src="`/static/img/icon-${key}.png`"
						mode="aspectFill"
					/>
					<input
						:type="item.type"
						:maxlength="item.maxlength"
						:placeholder="item.placeholder"
						v-model="item.value"
						class="f1 input fs-30"
						placeholder-class="color-ccc fs-28"
					/>

					<button
						v-if="key === `captcha`"
						class="fs-28 color-4052e4 border-none lh-2"
						:plain="true"
						hover-class="tap-hover"
						:disabled="captchaBtn.disabled"
						@click="getCaptcha"
					>
						{{ captchaBtn.text }}
					</button>
				</view>
			</block>
		</view>

		<button
			:style="{
				backgroundImage: `linear-gradient(45deg, #4051E3, #4672FF)`,
				margin: `134rpx 55rpx 0`,
			}"
			class="color-fff fs-32 br-20 lh-3 fw-700"
			hover-class="tap-hover"
			@click="submit"
		>
			重置
		</button>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import { sleep, isPhoneNumber } from "@/static/libs/utils";

	@Component
	export default class Register extends Vue {
		// component property
		statusHeight: number = uni.getSystemInfoSync().statusBarHeight;
		model: AnyObject = {
			account: {
				type: "number",
				maxlength: 11,
				placeholder: "请输入手机号码",
				value: "",
				name: "mobile",
			},
			captcha: {
				type: "number",
				maxlength: 6,
				placeholder: "请输入验证码",
				value: "",
				name: "code",
			},
			password: {
				type: "password",
				maxlength: 16,
				placeholder: "请输入密码",
				value: "",
				name: "password",
			},
		};
		timer: null | number = null;
		captchaBtn: AnyObject = {
			text: "获取验证码",
			disabled: false,
			count: 60,
		};

		getCaptcha() {
			if (this.captchaBtn.disabled) return;

			isPhoneNumber(this.model.account.value)
				? this.$request
						.get("/sendSms", {
							mobile: this.model.account.value,
						})
						.then(({ msg: title }) =>
							uni.showToast({
								title,
								success: this.countdown,
							})
						)
				: uni.showToast({
						title: "请检查手机号码是否输入正确",
						icon: "none",
				  });
		}

		countdown() {
			this.captchaBtn.disabled = true;
			this.timer = setInterval(() => {
				this.captchaBtn.count--;
				this.captchaBtn.text = `${this.captchaBtn.count}s后再试`;

				if (this.captchaBtn.count <= 0) {
					this.captchaBtn.disabled = false;
					this.captchaBtn.text = "获取验证码";
					this.captchaBtn.count = 60;
					this.timer && clearInterval(this.timer);
					this.timer = null;
				}
			}, 1000);
		}

		async submit() {
			const params: AnyObject = {},
				verify = Object.values(this.model).every((item) => {
					params[item.name] = item.value;

					!item.value && uni.showToast({ title: item.placeholder, icon: "none" });

					return Boolean(item.value);
				});

			if (!verify) return;

			const { msg: title } = await this.$request.post("/forget", params);
			uni.showToast({ title, duration: 1200 });
			await sleep(1.2);
			uni.navigateBack({});
		}
	}
</script>

<style lang="scss" scoped>
	// scss
</style>